<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>总体数据</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
</head>
<body>
<div class="app-page">
    <div class="app-page-content">
        <!--表单-->
        <div class="app-card">
            <div class="app-card-body">
                <div class="filter">
                    <div class="form-item row">
                        <div class="label">
                            <label>广告名称</label>
                        </div>
                        <div class="body">
                            <input type="text" name="advertisementName" th:value="${advertisementName}">
                        </div>
                    </div>
                    <div class="filter-item form-item row">
                        <div class="label"><label>选择时间</label></div>
                        <div class="flex1">
                            <div class="date-group z-df">
                                <input type="text" placeholder="开始时间" class="fp-time flatpickr-input" name="startTime"
                                       th:value="${startTime}" readonly="readonly">
                                <span>-</span>
                                <input type="text" placeholder="结束时间" class="fp-time flatpickr-input" name="endTime"
                                       th:value="${endTime}" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="filter-btn z-df">
                            <button class="z-btn z-primary" id="search">查询</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--曝光数-->
        <div class="app-card show">
            <div class="app-card-body">
                <div class="echarts" id="grid-exposureRate"></div>
            </div>
        </div>
        <!--触达人次和观看人次-->
        <div class="app-card show">
            <div class="app-card-body">
                <div class="echarts" id="grid-rw"></div>
            </div>
        </div>
        <!--表格-->
        <div class="app-card show">
            <div class="app-card-body">
                <div class="z-btn-group">
                    <a id="export-device-info" class="z-btn z-primary">导出</a>
                </div>
                <table class="z-table">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>曝光次数</th>
                        <th>触达人次</th>
                        <th>观看人次</th>
                        <th>观看时长（s）</th>
                        <th>平均观看时长（s）</th>
                        <th>观看率（%）</th>
                    </tr>
                    </thead>
                    <tbody id="info">
                    <tr v-for="item in list">
                        <td>{{item.time}}</td>
                        <td>{{item.exposuresSum}}</td>
                        <td>{{item.touchSum}}</td>
                        <td>{{item.watchSum}}</td>
                        <td>{{item.playDurationSum}}</td>
                        <td>{{item.watchAvg}}</td>
                        <td>{{item.watchRatio}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/lib/echarts/echarts.common.min.js}"></script>
<script th:src="@{/lib/vue/v2.5.16/vue.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //初始化时间选择
    flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文

    flatpickr(".fp-time", {
        // mode: "range",
    });
</script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';
    var url = "/dataReport/listTotalData";
    if (context) {
        url = context + url;
    }
    $(function () {
        //准备数据
        var data = [];
        //表单对象
        var form={
            advertisementName:"",
            startTime:"",
            endTime:""
        };


        //创建echarts实例曝光数
        var exposureSum = echarts.init(document.getElementById("grid-exposureRate"));
        //    配置曝光数选项
        var eOption = {
            title: {
                text: ["曝光数"],
                left: "left",
            },
            legend: {
                data: ["曝光数"],
                icon: "bar",
                itemWidth: 14,
                selectedMode: false,
            },
            dataset: {
                dimensions: ["time", "exposuresSum", "touchSum", "watchSum"],
                source: [],
            },
            xAxis: {
                type: "category",
                /* axisLabel:{
                     interval:1,
                 }*/
            },
            yAxis: {},
            series: [{
                name: "曝光数",
                type: "line",
                color:"#8260cf",
                encode: {
                    y: "exposuresSum"
                }
            }]
        }

        //创建echarts实例触达人次和观看人次
        var rw = echarts.init(document.getElementById("grid-rw"));
        //    配置触达人次和观看人次选项
        var rwOption = {
            title: {
                text: ["触达人次和观看人次",],
                left: "left",
            },
            legend: {
                data: ["触达人次", "观看人次"],
                icon: "bar",
                itemWidth: 14,
                selectedMode: false,
                bottom: "bottom"
            },
            dataset: {
                dimensions: ["time", "exposureSum", "touchSum", "watchSum"],
                source: [],
            },
            xAxis: {
                type: "category",
                /*  axisLabel:{
                      interval:1,
                  }*/
            },
            yAxis: {},
            series: [{
                name: "触达人次",
                type: "line",
                color: "#2062e6",
                encode: {
                    y: "touchSum"
                }
            }, {
                name: "观看人次",
                type: "line",
                color: "#ff8533",
                encode: {
                    y: "watchSum"
                }
            },]
        }


        //    新建Vue对象
        var vue = new Vue({
            el: "#info",
            data: {
                list: [],
            },
        });

        //初始化查询
        form.advertisementName=$("input[name=advertisementName]").val();
        form.startTime=$("input[name=startTime]").val();
        form.endTime=$("input[name=endTime]").val();

        if(form.advertisementName && form.startTime && form.endTime){
            getData(exposureSum, eOption, rwOption, rw, vue,data, form);
        }else if(!(form.advertisementName || form.startTime  || form.endTime)){
            //提醒用户输入查询信息
            popup.tipsTop("请输入查询信息");
        }
        //点击查询按钮复制表单
        $("#search").click(function () {
            form.advertisementName=$("input[name=advertisementName]").val();
            form.startTime=$("input[name=startTime]").val();
            form.endTime=$("input[name=endTime]").val();

            getData(exposureSum, eOption, rwOption, rw, vue,data, form);
        })
    })

    function getData(exposureSum, eOption, rwOption, rw, vue, data, form){
        //利用ajax从后台获取数据
        $.ajax({
            type: "post",
            url:url,
            async: true,
            dataType: "json",
            data:form,
            success: function (result) {
                if (result.code == 0) {
                    //显示查询结果
                    $(".show").removeClass("show");
                    //赋值data
                    data = result.data;
                    //    查询信息展示
                    //初始化配置
                    eOption.dataset.source = data;
                    //    更新图表
                    exposureSum.setOption(eOption);
                    //    初始化数据集
                    rwOption.dataset.source = data;
                    //    更新图表
                    rw.setOption(rwOption);
                    //更新表格
                    vue.list = data;
                } else {
                    popup.tips(result.msg)
                }
            }
        })
    }
    //导出excel
    $('#export-device-info').click(function () {
        var advertisementName = $("input[name='advertisementName']").val();
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        window.location.href = context + "/export/exportTotalData?advertisementName=" + (advertisementName == undefined ? "" : advertisementName) +
            "&startTime=" + (startTime == undefined ? "" : startTime) + "&endTime=" + (endTime == undefined ? "" : endTime);
    });
</script>
</body>
</html>